<template>
	<view class="content-wrap">
		<view class="card-wrap">
			<view class="card">
				<view class="card-title">
					<view class="left">钱包 余额</view>
				</view>
				<view class="amount-wrap">
					<view class="amount">
						￥{{user.balance}}
					</view>
				</view>
				<view class="buttom">
					<view>
						<image src="@/static/logo.png" style="width: 62rpx;height: 62rpx;text-align: 62rpx;" />
						<text>广西****学院</text>
					</view>
				</view>
			</view>
		</view>
		<view class="nav-wrap">
			<view class="item" @click="handleToUp()">
				<view>
					<image src="@/static/icon/jin.png" />
				</view>
				<text>充值</text>
			</view>
			<view class="item" @click="handleToOut()">
				<view>
					<image src="@/static/icon/chu.png" />
				</view>
				<text>提现</text>
			</view>
		</view>
		<view class="list-wrap">
			<view class="card">
				<view class="title">交易明细</view>
				<view class="item" v-for="item in bill">
					<view class="icon-wrap">
						<view class="uicon blue"><u-icon name="arrow-upward"></u-icon></view>
						<u-line class="u-line" length="50rpx" border-style="dotted" color="#333333"
							direction="col"></u-line>
					</view>

					<view class="left">
						<view class="top">{{item.description}}</view>
						<view class="time">{{item.payTime}}</view>
					</view>
					<view class="right">￥{{item.amount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserBill
	} from '@/api/system/wallet.js';
	import {
		getUserInfo
	} from "@/api/system/user"

	export default {
		data() {
			return {
				user: {},
				bill: []
			};
		},

		onShow() {
			this.getUser()
			this.getBill()
		},

		methods: {
			getUser() {
				getUserInfo().then(res => {
					console.log('user:', res);
					this.user = res.data
				})
			},
			getBill() {
				getUserBill().then(res => {
					console.log('bill:', res);
					this.bill = res.data
				})
			},
			handleToUp() {
				this.$tab.navigateTo("/pages/wallet/qrcode")
			},
			handleToOut() {
				this.$tab.navigateTo("/pages/wallet/withdraw")
			},
			async handleToPage(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.content-wrap {
		padding-top: 80rpx;
		padding-bottom: 40rpx;
	}

	.card-wrap {
		display: flex;
		justify-content: center;

		.card {
			width: 650rpx;
			// height: 350rpx;
			background: linear-gradient(to right, #4c9fff, #2f72ff);
			// background-color: $uni-bg-assist;
			border-radius: 18rpx;
			box-shadow: 0 2px 12px 0 rgba(56, 130, 255, 0.6);
			color: #ffffff;
			padding: 40rpx;


			.card-title {
				display: flex;
				justify-content: space-between;

				.left {
					font-size: 40rpx;
				}
			}

			.amount-wrap {
				margin-top: 20rpx;

				.amount {
					font-size: 60rpx;
					display: flex;

				}
			}

			.buttom {
				margin-top: 40rpx;
				font-size: 40rpx;
				color: rebeccapurple;
			}
		}
	}

	.nav-wrap {
		display: flex;
		height: 220rpx;
		padding: 30rpx 100rpx;
		color: #000;
		// margin: 10rpx 0;
		justify-content: space-between;
		font-weight: bold;

		.item {
			width: 150rpx;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 88rpx;
				height: 88rpx;
				padding: 10rpx;
			}
		}
	}

	.list-wrap {
		display: flex;
		justify-content: center;
		height: 55vh;
		margin-bottom: 100rpx;
		overflow: hidden;
		/* 超出部分隐藏 */

		.card {
			width: 650rpx;
			height: 100%;
			background-color: #ffffff;
			overflow-y: auto;
			border-radius: 18rpx;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

			.title {
				padding: 20rpx;
				font-weight: 600;
			}

			.item {
				height: 17%;
				display: flex;
				font-size: 33rpx;
				justify-content: space-between;
				margin: 0rpx 20rpx 0 20rpx;
				color: #000;

				.icon-wrap {
					display: flex;
					flex-direction: column;
					align-items: center;

					.uicon {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						color: #ffffff;

						&.blue {
							background-color: #ccc;
						}

						&.orange {
							background-color: orange;
						}
					}

					.u-line {
						color: #000;
					}
				}

				.left {
					flex: 1;
					margin-left: 20rpx;

					.top {
						// font-weight: 600;
					}

					.time {
						font-size: 30rpx;
						color: #000;
						;
					}
				}

				.right {
					font-weight: 600;
				}
			}
		}
	}
</style>